<!DOCTYPE html>
<html lang="zh-cmn-Hans"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>git统计</title>
    <script src="/jquery-3.4.1.min.js" th:src="@{/jquery-3.4.1.min.js}"></script>
    <script src="/popper.min.js" th:src="@{/popper.min.js}"></script>
    <link href="/bootstrap.min.css" rel="stylesheet" th:href="@{/bootstrap.min.css}" type="text/css">
    <script src="/bootstrap.min.js" th:src="@{/bootstrap.min.js}"></script>
    <script src="/echarts.min.js" th:src="@{/echarts.min.js}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1>日期列表</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <!--<table border="1" class="table">-->
            <table class="table table-striped table-bordered table-sm">
                <thead class="thead-dark">
                <tr>
                    <th>日期</th>
                    <th>---</th>
                </tr>
                </thead>
                <tbody>
                <tr th:if="${reslist.size()} eq 0">
                    <td colspan="5">没有信息！！</td>
                </tr>
                <tr th:each="res : ${reslist}">
                    <td th:text="${res.date}"></td>
                    <td>
                        <a  th:href="${res.url}">跳转</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <div id="main1" style="width:100%;height:500px;"></div>
            <script type="text/javascript" th:inline="javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main1'));

                var data = [[${totalData}]]

                var xAxisData = []
                var addData = []
                var subData = []
                var totalData = []

                data.forEach(e =>{
                    xAxisData.push(e.date)
                    addData.push(e['all-add'])
                    subData.push(-e['all-sub'])
                    totalData.push(e['all-total'])
                })

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '7日整体趋势'
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        containLabel:true,
                    },
                    tooltip: {},
                    legend: {
                        data: ['增加','减少','合计']
                    },
                    xAxis: {
                        data: xAxisData,
                        axisLabel:{
                            interval:0,
                            rotate:-30,
                        }
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '增加',
                            type: 'line',
                            data: addData
                        },
                        {
                            name: '减少',
                            type: 'line',
                            data: subData
                        },
                        {
                            name: '合计',
                            type: 'line',
                            data: totalData
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
        </div>
        <div class="col-6">
            <div id="main2" style="width:100%;height:500px;"></div>
            <script type="text/javascript" th:inline="javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main2'));

                var data = [[${personData}]]

                var xAxisData = []
                var addData = []
                var subData = []
                var totalData = []

                for (let key in data) {
                    xAxisData.push(key)
                    addData.push(data[key].addsum)
                    subData.push(-data[key].subsum)
                    totalData.push(data[key].totalsum)
                }

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '7日人行统计'
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        containLabel:true,
                    },
                    tooltip: {},
                    legend: {
                        data: ['增加','减少','合计']
                    },
                    xAxis: {
                        data: xAxisData,
                        axisLabel:{
                            interval:0,
                            rotate:-30,
                        }
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '增加',
                            type: 'bar',
                            barGap: 0,
                            stack: 'Total',
                            data: addData
                        },
                        {
                            name: '减少',
                            type: 'bar',
                            stack: 'Total',
                            data: subData
                        },
                        {
                            name: '合计',
                            type: 'bar',
                            data: totalData
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
        </div>
    </div>
</div>
</body>
</html>